import React from 'react';

import { Checkbox, Flex } from 'antd-mobile';
import styles from './index.less';

const { AgreeItem } = Checkbox;

const Radio = React.forwardRef(({ dataSource = [], value, onChange, ...rest }, ref) => {
    const handleChange = v => {
        onChange(v);
    };

    return (
        <Flex ref={ref} {...rest}>
            {dataSource.map(item => (
                <Flex.Item key={item.value} className={styles.checkboxWrap}>
                    <AgreeItem checked={item.value === value} onChange={() => handleChange(item.value)}>
                        <span style={{ fontSize: 16, color: '#2A2F3C' }}>{item.label}</span>
                    </AgreeItem>
                </Flex.Item>
            ))}
        </Flex>
    );
});

export default Radio;
